<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="()=>{this.visible=false}"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" v-bind="layout">

      <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
      <a-collapse-panel :style="customStyle" key="1" header="批量导入">
           <a-upload
           :customRequest="UpLoad"
           :headers="headers">
           <a-button> <a-icon type="upload" /> 选择上传文件 </a-button>
    </a-upload>
    <a-button @click="downloadfile"><a-icon type="download" /> 下载模板 </a-button>
    <a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.IdNumber"
      :dataSource="data"
      :loading="loading"
      :bordered="false"
      size="middle"
    >
    
    </a-table>
       </a-collapse-panel>
       </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
const columns = [
  { title: '姓名', dataIndex: 'Name', width: '10%' },
  { title: '身份证号', dataIndex: 'IdNumber', width: '10%' },
  { title: '手机', dataIndex: 'Phone', width: '10%' },
  { title: '银行账号', dataIndex: 'BankAcc', width: '10%' },
  { title: '所属银行', dataIndex: 'BankName', width: '10%' },
  { title: '校验结果', dataIndex: 'result', width: '10%' },
]

import TokenCache from '@/utils/cache/TokenCache'
export default {
  props: {
    parentObj: Object
  },
  data() {
    return {
      tempmodel:{},
      data: [],
      customStyle:
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      activeKey: ['1'],//折叠面板
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      columns,
      title: '',
      headers: { Authorization: 'Bearer ' + TokenCache.getToken() },
    }
  },
  methods: {
    handleSubmit(){
      for(let i=0;i<this.data.length;i++)
      {
        this.tempmodel.EmpName = this.data[i].Name
        this.tempmodel.IdCardNo = this.data[i].IdNumber
        this.tempmodel.BankCardNo = this.data[i].BankAcc
        this.tempmodel.EmpPhone = this.data[i].Phone
        this.tempmodel.EmpAddress = this.data[i].Address
        this.tempmodel.Email = this.data[i].Email
        this.tempmodel.BankName = this.data[i].BankName
        this.tempmodel.AuditInf = 0
        this.$http.post('/Base_leasesystem_employee/leasesystem_employee/SaveData',this.tempmodel).then((resJson)=>{
        if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
      })
      }

      
      console.log(this.data)
    },
    openForm(id, title) {
      this.init()

    },
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    UpLoad(info)
    {
    let file = info.file;
    let param = new FormData(); //创建form对象
    param.append('file',file);//通过append向form对象添加数据
    console.log(param.get('file')); //FormData私有类对象访问不到，可以通过get判断值是否传进去
    let config = {
        headers:{'Content-Type':'multipart/form-data'}
    }; 
    this.$http.post('/Base_leasesystem_service/leasesystem_service/UploadExcel', param, config).then(res => {
      console.log(res)
        this.data = res.Data.Data
        if(res.Success){
          this.$message.success("导入成功")
        }else{
          this.$message.error("导入失败，请重试")
        }
    })
    },
    downloadfile(){
      this.$http.post('/Base_Manage/Upload/downfile',{id:"Settlementtemplate (1).xlsx"}, { responseType: 'blob' }).then(res =>{
          console.log(res)
          const blob = new Blob([res]);
          const fileName = '个人信息模板.xlsx';
          const elink = document.createElement('a');// 创建a标签
          elink.download = fileName;// 为a标签添加download属性
          // a.download = fileName; //命名下载名称
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();// 点击下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);// 释放标签
      })
    }
  }
}
</script>

<style>
.ant-table-thead > tr > th
{
  font-weight: 600;
  color: #333333;
}
</style>